<template>
  <div class="app-container">
    <div class="app-header">
      <HEADER 
      v-model:clm="Current_left_Model"
      v-model:cem="Current_Expand_Model"
      v-model:se="show_expand"
      />
    </div>
    <div class="app-body">
      <BODY  
      v-model:clm="Current_left_Model"
      v-model:cem="Current_Expand_Model"
      v-model:se="show_expand"
      />
    </div>
  </div>
</template>

<script setup>
import { inject, onBeforeMount, onMounted, provide ,ref} from 'vue';
import { get_message_no_response } from "@/api/chat/user_behavior"
import BODY from './body/layout.vue';
import HEADER from './header/layout.vue';
import WebSocketChat from "@/static/js/socketio/client.js";
import * as HANDLER from "@/static/js/socketio/handler.js"
import { get_user_room_request } from "@/api/chat/user_behavior"

// 由于本身架构不采用inject
let Current_left_Model = ref("message")
let Current_Expand_Model = ref(null)
let show_expand = ref(false)

const user = inject("user")();
let client = null;
const chat = inject("chat")();



// 这里处理动态的mapper,不动态慢慢添加,直接全部映射


const deal_render_user_group = (data, ws) => {
  // 处理用户在线下，申请类型的,更新用户列表,由于是会话存储
  if (data?.room_type == 'group'){ 
       chat.value.add_group_item(data?.room_info)
  }
  if (data?.room_type == 'double') {
       chat.value.add_friend_item(data?.room_info)
  }
}

const deal_render_request_room = async () => { 
  //采用api请求更新
  const predata = (await get_user_room_request(chat?.value?.get_user_info()?.id,))
  chat.value.set_request_room_data('data', predata.data)
  chat.value.set_request_room_data('meta', predata.meta) 
}
const deal_render_notice = async () => { 
    const data = await get_message_no_response(chat?.value?.get_user_info()?.id,1)
    chat.value.set_no_response_message(data?.data)
}

const deal_render_groups_list = async () => { 
   // 用于渲染创建群聊
    const grouplist = await get_user_GroupList(user.value?.get_user()?.id)
    chat.value.set_group_list(grouplist)
}
const messageMapper = {
    ping: HANDLER.handlePing,
    message_callback: HANDLER.send_message_callback,
    render_user_group: deal_render_user_group,
    render_request_room: deal_render_request_room,
    render_notice: deal_render_notice,
    render_groups_list: deal_render_groups_list
};


onBeforeMount(() => {
    client = new WebSocketChat('ws', messageMapper ,user.value?.get_user()?.id);
    client.connect();
    provide("chat_client", client);
    if (chat.value.get_user_info() == undefined) { 
      chat.value.set_user_info(user.value?.get_user());
  } 
});

onMounted(async () => { 
  
});
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: auto;
}

.app-header {
  width: 100%;
  max-width: 100vw; /* 确保宽度不会超过 100vw */
  margin: 10px auto -12px auto;
  flex: 0 0 50px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ac85d6, #6397f1);
  color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
  position: relative;
}

.app-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  width: 100%;
  max-width: 100vw; /* 确保宽度不会超过 100vw */
  min-width: 300px; /* 设置最小宽度 */
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box; /* 确保 padding 不会影响布局 */
}
</style>